<template>
  <div class="flow-wrap">
    <el-dialog :visible.sync="dialogVisible.show" center>
      <div class="show-title">序列号：{{ sn }}</div>
      <div class="show-title">流标识：{{ sid_seled }}</div>
      <el-form
        :inline="true"
        :model="ruleform"
        ref="form"
        :rules="rules"
        class="demo-form-inline totalFlow-form"
      >
        <el-form-item label="主要限制(单选)" prop="limited_type">
          <el-radio-group v-model="ruleform.limited_type">
            <!-- 1 -->
            <div class="item">
              <el-radio label="FREE">不受限制</el-radio>
            </div>
            <!-- 2 -->
            <div class="item">
              <el-radio label="DEADTIME">截止时间限制</el-radio>
              <span>
                <el-date-picker
                  v-model="ruleform.picker"
                  type="datetime"
                  placeholder="选择日期时间"
                ></el-date-picker>
              </span>
            </div>
            <!-- 3 -->
            <div class="item">
              <el-radio label="DURATION">总时长限制</el-radio>
              <span>
                <el-form-item label prop="day">
                  <el-input
                    v-model="ruleform.day"
                    style="width:100px"
                    message
                    placeholder
                  ></el-input
                  >天
                </el-form-item>
                <span>
                  <el-form-item label prop="hour">
                    <el-input
                      v-model="ruleform.hour"
                      style="width:100px"
                      message
                      placeholder
                    ></el-input
                    >小时
                  </el-form-item>
                </span>
                <span>
                  <el-form-item label prop="minute">
                    <el-input
                      v-model="ruleform.minute"
                      style="width:100px"
                      message
                      placeholder
                    ></el-input
                    >分
                  </el-form-item>
                </span>
                <span>
                  <el-form-item label prop="second">
                    <el-input
                      v-model="ruleform.second"
                      style="width:100px"
                      message
                      placeholder
                    ></el-input
                    >秒
                  </el-form-item>
                </span>
              </span>
            </div>
            <!-- 4 -->
            <div class="item">
              <el-radio label="TRAFFIC">总流量限制</el-radio>
              <span>
                <el-form-item label prop="TRAFFIC">
                  <el-input
                    v-model="ruleform.TRAFFIC"
                    style="width:100px"
                    message
                    placeholder
                  ></el-input
                  >GB
                </el-form-item>
              </span>
            </div>
          </el-radio-group>
        </el-form-item>
        <br />
        <!-- 带多选 -->
        <el-form-item label="额外限制(可多选)" prop="limited_type">
          <el-checkbox-group v-model="ruleform.checkboxArr">
            <div class="item">
              <el-checkbox label="DURATION">每天时长</el-checkbox>
              <span>
                <span>
                  <el-form-item label prop="hour_extra">
                    <el-input
                      v-model="ruleform.hour_extra"
                      style="width:100px"
                      message
                      placeholder
                    ></el-input
                    >小时
                  </el-form-item>
                </span>
                <span>
                  <el-form-item label prop="minute_extra">
                    <el-input
                      v-model="ruleform.minute_extra"
                      style="width:100px"
                      message
                      placeholder
                    ></el-input
                    >分
                  </el-form-item>
                </span>
                <span>
                  <el-form-item label prop="second_extra">
                    <el-input
                      v-model="ruleform.second_extra"
                      style="width:100px"
                      message
                      placeholder
                    ></el-input
                    >秒
                  </el-form-item>
                </span>
              </span>
            </div>
            <div class="item">
              <el-checkbox label="TRAFFIC">同时出流</el-checkbox>
              <span>
                <el-form-item label prop="max_outs">
                  <el-input
                    v-model="ruleform.max_outs"
                    style="width:100px"
                    message
                    placeholder="1-99"
                  ></el-input
                  >路
                </el-form-item>
              </span>
            </div>
          </el-checkbox-group>
        </el-form-item>
        <br />
        <el-form-item class="btn-wrap">
          <el-button type="primary" plain @click="onSubmit('form')"
            >修改</el-button
          >
          <el-button type="warning" plain @click="onReset('form')"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { tempToTime, getYMDHMS } from "@/utils/Tool";
import { getData, postData } from "@/request/http";
export default {
  name: "",
  components: {},
  props: {
    dialogVisible: {
      type: Object,
      default() {
        return {
          show: false
        };
      }
    },
    sid: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      sn: "",
      sid_seled: "",
      ruleform: {
        limited_type: "FREE", //单选
        picker: "",
        day: "",
        hour: "",
        minute: "",
        second: "",
        TRAFFIC: "",
        checkboxArr: [], //多选
        hour_extra: "",
        minute_extra: "",
        second_extra: "",
        max_outs: 0
      },
      rules: {
        limited_type: [{ required: false, message: "请选择", trigger: "blur" }],
        checkboxArr: {
          type: "array",
          required: false,
          message: "请选择",
          trigger: "change"
        }
      }
    };
  },
  computed: {},
  created() {},
  watch: {
    sid: {
      handler(newVal) {
        this.sid_seled = newVal;
        console.log(this.sid_seled);
        this.getList();
      },
      immediate: true
    }
  },
  mounted() {
    console.log(this.$route.query.sn);
    this.sn = this.$route.query.sn;
  },
  methods: {
    //添加 提交
    onSubmit(formName) {
      var that = this;
      let picker_timestamp = new Date(that.ruleform.picker).getTime();
      var day = !Number(that.ruleform.day) ? 0 : Number(that.ruleform.day);
      var hour = !Number(that.ruleform.hour) ? 0 : Number(that.ruleform.hour);
      var minute = !Number(that.ruleform.minute)
        ? 0
        : Number(that.ruleform.minute);
      var second = !Number(that.ruleform.second)
        ? 0
        : Number(that.ruleform.second);
      //提交的天，小时，分钟，秒的总秒数
      var DURATION = day * 86400 + hour * 3600 + minute * 60 + second;
      // console.log(that.ruleform.limited_type);

      //额外数据中，提交天，小时，分钟，秒的总秒数
      // var hour_extra = that.ruleform.hour_extra;
      // var minute_extra = that.ruleform.minute_extra;
      // var second_extra = that.ruleform.second_extra;
      var hour_extra = !Number(that.ruleform.hour_extra)
        ? 0
        : Number(that.ruleform.hour_extra);
      var minute_extra = !Number(that.ruleform.minute_extra)
        ? 0
        : Number(that.ruleform.minute_extra);
      var second_extra = !Number(that.ruleform.second_extra)
        ? 0
        : Number(that.ruleform.second_extra);

      var duration_everyday =
        hour_extra * 3600 + minute_extra * 60 + second_extra;
      var max_outs = that.ruleform.max_outs;
      if (that.ruleform.limited_type == "FREE") {
        //1.不受限制
        var limited_value = "";
        that.submitFn(
          "FREE",
          limited_value,
          formName,
          duration_everyday,
          max_outs
        );
      } else if (that.ruleform.limited_type == "TRAFFIC") {
        //4.流量
        var limited_value = that.ruleform.TRAFFIC;
        that.submitFn(
          "TRAFFIC",
          limited_value,
          formName,
          duration_everyday,
          max_outs
        );
      } else if (that.ruleform.limited_type == "DEADTIME") {
        //2.截止时间，日历
        var limited_value = picker_timestamp;
        that.submitFn(
          "DEADTIME",
          limited_value,
          formName,
          duration_everyday,
          max_outs
        );
        console.log(3);
      } else if (that.ruleform.limited_type == "DURATION") {
        //3，总时长，天小时分秒
        var limited_value = DURATION;
        that.submitFn(
          "DURATION",
          limited_value,
          formName,
          duration_everyday,
          max_outs
        );
      }
    },
    submitFn(
      limited_type,
      limited_value,
      formName,
      duration_everyday,
      max_outs
    ) {
      var that = this;
      that.$refs[formName].validate(valid => {
        if (valid) {
          postData("/adminweb/device/stream/limit/set", {
            sid: this.sid,
            limited_type: limited_type,
            limited_value: limited_value,
            duration_everyday: duration_everyday,
            max_outs: max_outs
          })
            .then(res => {
              if (res.code == 0) {
                that.$message.success("添加成功！");
                that.getList();
              } else {
                that.$message.error(res.code + "，" + res.msg);
              }
            })
            .catch(res => {
              that.$message.error(res.code + "，" + res.msg);
            });
        } else {
          that.$message.error("添加失败");
          return false;
        }
      });
    },
    // 重置
    onReset(val) {
      //this.$emit("reset", true);
      this.$refs[val].resetFields();
    },

    //初始展示
    getList() {
      postData("/adminweb/device/stream/limit/get", {
        sid: this.sid
      })
        .then(res => {
          console.log(res);
          if (res.code == 0) {
            let datas = res.datas;
            this.ruleform.limited_type = datas.limited_type;
            var limited_type = datas.limited_type;
            var limited_value = datas.limited_value;
            if (limited_type == "FREE") {
              //1.不受限制
              this.ruleform.limited_type == "FREE";
            } else if (limited_type == "TRAFFIC") {
              //4.流量
              this.ruleform.limited_type == "TRAFFIC";
              this.ruleform.TRAFFIC = datas.limited_value;
            } else if (limited_type == "DEADTIME") {
              //2.截止时间，日历
              this.ruleform.limited_type == "DEADTIME";
              var da = datas.limited_value;
              this.ruleform.picker = getYMDHMS(da);
            } else if (limited_type == "DURATION") {
              //3，总时长，天小时分秒
              this.ruleform.limited_type == "DURATION";
              var DURATION = datas.limited_value;
              var transed = tempToTime(DURATION);
              console.log(transed);
              this.ruleform.day = transed[0];
              this.ruleform.hour = transed[1];
              this.ruleform.minute = transed[2];
              this.ruleform.second = transed[3];
            }
            //额外中,小时分秒
            var duration_everyday_show = datas.duration_everyday;
            var transed = tempToTime(duration_everyday_show);
            this.ruleform.hour_extra = transed[1];
            this.ruleform.minute_extra = transed[2];
            this.ruleform.second_extra = transed[3];
            //额外，流量路数
            this.ruleform.max_outs = datas.max_outs;
          }else if (res.code == -56055) {
            return;
          }  else {
            this.$message.error(res.code + "，" + res.msg);
          }
        })
        .catch(res => {
          this.$message.error(res.code + "，" + res.msg);
        });
    }
  }
};
</script>
<style scoped>
.flow-wrap {
  margin-bottom: 20px;
  border-radius: 4px;
  overflow: hidden;
  color: #303133;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  border: 1px solid #ebeef5;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.totalFlow-form {
  /* padding-left: 30px; */
}
.item {
  margin-top: 30px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.totalFlow-wrap >>> .el-form--inline .el-form-item__content {
  display: block;
}
.totalFlow-wrap >>> .el-radio {
  margin-top: 0;
}

.show-title {
  margin-bottom: 10px;
  /* font-weight: 600; */
}
</style>
